<template>
	<div>
		<div class="show-batch-btn">
			<el-button
				v-if="
					hasPermission(creditPermissionId) ||
						hasPermission(accountPermissionId)
				"
				type="primary"
				size="small"
				:disabled="loading"
				@click="showBatch"
			>
				批量选择
			</el-button>
			<el-button
				v-if="hasPermission(creditPermissionId)"
				:type="isShowBatch ? 'primary' : 'info'"
				:disabled="!isShowBatch || loading"
				size="small"
				@click="setBatch(1)"
			>
				调整信用等级
			</el-button>
			<el-button
				v-if="hasPermission(accountPermissionId)"
				:type="isShowBatch ? 'primary' : 'info'"
				:disabled="!isShowBatch || loading"
				size="small"
				@click="setBatch(2)"
			>
				调整账号状态
			</el-button>
		</div>
		<el-dialog
			v-if="editVisible"
			:title="dialogTitle"
			width="35%"
			:append-to-body="true"
			:destroy-on-close="true"
			:visible.sync="editVisible"
			:close-on-click-modal="false"
			:before-close="closeFormDialog"
			@close="closeFormDialog"
		>
			<div
				v-loading="editLoading"
				element-loading-spinner="el-icon-loading"
			>
				<el-form
					ref="editForm"
					:rules="rules"
					:model="editData"
					label-width="120px"
					label-suffix=":"
				>
					<el-form-item
						v-if="editType === 1"
						:label="`${$t('member.credit_rating')}`"
						prop="creditLevel"
					>
						<el-select
							v-model="editData.creditLevel"
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								v-for="item in creditLevelList"
								:key="item"
								:label="item"
								:value="item"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="editType === 2"
						:label="`${$t('common.account_status')}`"
					>
						<template v-if="userType === 'member'">
							<el-checkbox-group v-model="accountStatus">
								<el-checkbox label="1">
									{{ $t('common.login_lock_status') }}
								</el-checkbox>
								<el-checkbox label="2">
									{{ $t('common.game_lock_status') }}
								</el-checkbox>
								<el-checkbox label="3">
									{{ $t('common.account_lock_status') }}
								</el-checkbox>
							</el-checkbox-group>
						</template>
						<template v-if="userType === 'proxy'">
							<span>{{ $t('agent.login_lock') }}</span>
							<el-switch
								v-model="loginLockStatus"
								:inactive-value="0"
								:active-value="1"
							></el-switch>

							<span style="margin-left:20px;">
								{{ $t('agent.charge_lock') }}
							</span>
							<el-switch
								v-model="paymentLockStatus"
								:inactive-value="0"
								:active-value="1"
							></el-switch>
						</template>
					</el-form-item>
					<el-form-item
						:label="$t('member.submit_comments')"
						prop="remark"
					>
						<el-input
							v-model.trim="editData.remark"
							maxlength="500"
							type="textarea"
							show-word-limit
							clearable
							:rows="4"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" style="text-align: center">
					<el-button :disabled="editLoading" @click="closeFormDialog">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						type="primary"
						:disabled="editLoading"
						:loading="editLoading"
						@click="submitEdit"
					>
						{{ $t('common.sure') }}
					</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	props: {
		userType: {
			type: String,
			default: ''
		},
		isShowBatch: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		},
		batchUserList: {
			type: Array,
			default: () => []
		},
		creditPermissionId: {
			type: String,
			default: ''
		},
		accountPermissionId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			dialogTitle: '',
			editVisible: false,
			editLoading: false,
			editType: 1,
			editData: {
				creditLevel: undefined,
				remark: ''
			},
			creditLevelList: [],
			accountStatus: [],
			loginLockStatus: 0,
			paymentLockStatus: 0
		}
	},
	computed: {
		rules() {
			const testCreditLevel = (rule, value, callback) => {
				if (value === undefined) {
					callback(new Error('请选择信用等级'))
				} else {
					callback()
				}
			}
			const testRemark = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入备注'))
				} else {
					callback()
				}
			}
			return {
				creditLevel: [
					{
						required: true,
						validator: testCreditLevel,
						trigger: 'change'
					}
				],
				remark: [
					{
						required: true,
						validator: testRemark,
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		showBatch() {
			this.$emit('update:isShowBatch', true)
			if (!this.isShowBatch) {
				this.$emit('resetBatchUser')
			}
		},
		submitEdit() {
			this.$refs.editForm.validate((valid) => {
				if (!valid) {
					return
				}
				const submitParams = { userList: this.batchUserList }
				if (this.editType === 1) {
					submitParams.creditLevelAfter = {
						creditLevel: this.editData.creditLevel,
						remark: this.editData.remark
					}
				} else if (this.editType === 2) {
					submitParams.accountStatusAfter =
						this.userType === 'member'
							? {
									loginLockStatus: this.accountStatus.includes(
										'1'
									)
										? 1
										: 0,
									gameLockStatus: this.accountStatus.includes(
										'2'
									)
										? 1
										: 0,
									paymentLockStatus: this.accountStatus.includes(
										'3'
									)
										? 1
										: 0,
									remark: this.editData.remark
							  }
							: {
									loginLockStatus: this.loginLockStatus,
									paymentLockStatus: this.paymentLockStatus,
									remark: this.editData.remark
							  }
				}
				this.editLoading = true
				const submitApi =
					this.userType === 'member'
						? 'setMemberBatchInfoEdit'
						: 'setProxyBatchInfoEdit'
				this.$api[submitApi](submitParams)
					.then((res) => {
						this.editLoading = false
						if (res?.code === 200) {
							this.$message.success('批量设置成功')
							this.editVisible = false
							this.resetEditData()
							this.$emit('resetBatchUser')
							this.$emit('loadData')
						}
					})
					.catch(() => {
						this.editLoading = false
					})
			})
		},
		setBatch(editType) {
			if (this.batchUserList.length <= 0) {
				this.$message.closeAll()
				this.$message.warning('请先选择数据')
				return
			}
			this.editType = editType
			if (this.editType === 1) {
				this.getCreditLevelList()
				this.dialogTitle = this.$t('member.credit_rating')
			} else if (this.editType === 2) {
				this.dialogTitle = this.$t('common.account_status')
			}
			this.editVisible = true
		},
		getCreditLevelList() {
			this.$api.getCreditLevelConfcreditList().then((res) => {
				this.creditLevelList = res?.data || []
			})
		},
		resetEditData() {
			this.accountStatus = []
			this.loginLockStatus = 0
			this.paymentLockStatus = 0
			this.editData = {
				creditLevel: undefined,
				remark: ''
			}
		},
		closeFormDialog() {
			this.editVisible = false
			this.resetEditData()
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
	border-bottom: 1px solid #797979;
	color: #909399;
	font-weight: 700;
}
.show-batch-btn {
	width: 100%;
	text-align: right;
	margin-bottom: 5px;
}
</style>
